<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
    <title>Luckysheet</title>

    <link rel='stylesheet' href='./plugins/css/pluginsCss.css'/>
    <link rel='stylesheet' href='./plugins/plugins.css'/>
    <link rel='stylesheet' href='./css/luckysheet.css'/>
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css'/>
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>

</head>

<body>
<!-- Non-full screen test -->
<!-- <div style="position: relative;width: 100%;height: 100%;">

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:80%;height:500px;left: 20%;top: 200px;bottom:0;right: 0;"></div>
</div> -->

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
<!-- demo feature, non-production use -->
<script src="./demoData/demoFeature.js"></script>
<script src="./demoData/sheetFormula.js"></script>
<script src="./demoData/sheetCell.js"></script>
<script src="./demoData/sheetConditionFormat.js"></script>
<script src="./demoData/sheetTable.js"></script>
<script src="./demoData/sheetComment.js"></script>
<script src="./demoData/sheetPivotTableData.js"></script>
<script src="./demoData/sheetPivotTable.js"></script>
<script src="./demoData/sheetSparkline.js"></script>
<script src="./demoData/sheetChart.js"></script>
<script src="./demoData/sheetPicture.js"></script>
<script src="./demoData/sheetDataVerification.js"></script>

<script>
    // import sheetFormula from './demoData/sheetFormula.js'
    // import sheetCell from './demoData/sheetCell.js'
    // import sheetConditionFormat from './demoData/sheetConditionFormat.js'
    // import sheetTable from './demoData/sheetTable.js'
    // import sheetComment from './demoData/sheetComment.js'
    // import sheetPivotTableData from './demoData/sheetPivotTableData.js'
    // import sheetPivotTable from './demoData/sheetPivotTable.js'
    // import sheetSparkline from './demoData/sheetSparkline.js'
    // import sheetChart from './demoData/sheetChart.js'
    // import sheetPicture from './demoData/sheetPicture.js'
    // import sheetDataVerification from './demoData/sheetDataVerification.js'

    $(function () {

        // According to the browser language
        var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
        var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
        var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
        var options = null;

        if (isShare || gridKey) {
            // http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
            if (!gridKey) {
                alert('If gridKey is not provided in the address bar, please add it in the source code')
            }
            options = {
                container: "luckysheet",
                lang: lang,
                allowUpdate: true,
                updateImageUrl: location.origin + "/luckysheet/api/updateImg",
                updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
                gridKey: gridKey,
                loadUrl: location.origin + "/luckysheet/api/load",
                loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
            }
        } else {
            // http://localhost:3000/
            options = {
                container: 'luckysheet',
                lang: lang,
                // pager: {
                // 	pageIndex: 1,
                // 	pageSize: 10,
                // 	total: 50,
                // 	selectOption: [10, 20]
                // },
                forceCalculation: false,
                plugins: ['chart'],
                fontList: [
                    {
                        "fontName": "HanaleiFill",
                        "url": "./assets/iconfont/HanaleiFill-Regular.ttf"
                    },
                    {
                        "fontName": "Anton",
                        "url": "./assets/iconfont/Anton-Regular.ttf"
                    },
                    {
                        "fontName": "Pacifico",
                        "url": "./assets/iconfont/Pacifico-Regular.ttf"
                    }
                ],
                functionButton: '<button id="saveAndSubmit" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">保存并提交</button><button id="saveAndSubmit2" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;">保存并提交2</button>',
                functionButtonIds: ['saveAndSubmit', 'saveAndSubmit2'],
                hook: {
                    cellDragStop: function (cell, postion, sheetFile, ctx, event) {
                        // console.info(cell, postion, sheetFile, ctx, event);
                    },
                    rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
                        // console.log(rowNum);
                    },
                    rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
                        // console.log(ctx);
                    },
                    columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
                        // console.log(columnAbc);
                    },
                    columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
                        // console.log(postion);
                    },
                    cellRenderBefore: function (cell, postion, sheetFile, ctx) {
                        // console.log(cell,postion,sheetFile,ctx);
                    },
                    cellRenderAfter: function (cell, postion, sheetFile, ctx) {
                        // console.log(postion);
                    },
                    cellMousedownBefore: function (cell, postion, sheetFile, ctx) {
                        // console.log(postion);
                    },
                    cellMousedown: function (cell, postion, sheetFile, ctx) {
                        // console.log(sheetFile);
                    },
                    sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
                        // console.log(cell,postion,sheetFile,moveState,ctx);
                    },
                    sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
                        // console.log(cell,postion,sheetFile,moveState,ctx);
                    },
                    cellAllRenderBefore: function (data, sheetFile, ctx) {
                        // console.info(data,sheetFile,ctx)
                    },
                    updated: function (operate) {
                        // console.info(operate)
                    },
                    cellUpdateBefore: function (r, c, value, isRefresh) {
                        // console.info('cellUpdateBefore',r,c,value,isRefresh)
                    },
                    cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
                        // console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
                    },
                    sheetActivate: function (index, isPivotInitial, isNewSheet) {
                        // console.info(index, isPivotInitial, isNewSheet)
                    },
                    rangeSelect: function (index, sheet) {
                        // console.info(index, sheet)
                    },
                    commentInsertBefore: function (r, c) {
                        // console.info(r, c)
                    },
                    commentInsertAfter: function (r, c, cell) {
                        // console.info(r, c, cell)
                    },
                    commentDeleteBefore: function (r, c, cell) {
                        // console.info(r, c, cell)
                    },
                    commentDeleteAfter: function (r, c, cell) {
                        // console.info(r, c, cell)
                    },
                    commentUpdateBefore: function (r, c, value) {
                        // console.info(r, c, value)
                    },
                    commentUpdateAfter: function (r, c, oldCell, newCell) {
                        // console.info(r, c, oldCell, newCell)
                    },
                    cellEditBefore: function (range) {
                        // console.info(range)
                    },
                    workbookCreateAfter: function (json) {
                        // console.info(json)
                    },
                    rangePasteBefore: function (range, data) {
                        // debugger
                        // console.info('rangePasteBefore',range,data)
                        // return false; //Can intercept paste
                    },
                    rangePasteAfter: function (range, originData, pasteData) {
                        // debugger
                        // console.info('rangePasteBefore',range,data)
                        // return false; //Can intercept paste
                    },
                    backBtmClick: function () {
                        alert("返回");
                    },
                    functionBtmClick: function (id) {
                        alert(id + ' has been clicked!');
                    },
                    sheetCreateBefore:function (){
                        alert('create was be prevent');
                      return false;
                    },
                    sheetCreateAfter: function (param) {
                        alert(JSON.stringify(param));
                    },
                    sheetDeleteBefore:function (data) {
                        alert(JSON.stringify(data));
                    },
                    sheetDeleteAfter:function (data) {
                        // alert(JSON.stringify(data));
                    }
                },
                data:
                    [sheetCell, sheetFormula, sheetConditionFormat, sheetSparkline, sheetTable, sheetComment, sheetPivotTableData, sheetPivotTable, sheetChart, sheetPicture, sheetDataVerification]
            }
        }
        options.loading = {
            image: () => {
                return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
            },
            imageClass: "loadingAnimation"
        }
        options.cellRightClickConfig = {
            customs: [{
                title: '获取单元格对象',
                onClick: function (clickEvent, event, params) {
                    alert(JSON.stringify(luckysheet.getRangeValue()));
                }
            }]
        }
        luckysheet.create(options);
    })
</script>
<style>
    /* 自定义loading演示样式 */
    @keyframes loading-rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40px;
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120px;
        }
    }

    .loadingAnimation {
        width: 3em;
        height: 3em;
        animation: loading-rotate 2s linear infinite;
    }

    .loadingAnimation circle {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: currentColor;
        stroke-linecap: round;
    }
</style>
</body>

</html>